<template>
	<view class="content">
		<view class="info">
			<view class="txt">
				<text class="fb">账户：</text><text>**** **** **** 8256</text>
			</view>
			<view class="txt">
				<text class="fb">总资产：</text><text>¥ 20,000.00</text>
			</view>
		</view>
		<view class="list">
			<view class="item" @click="itemClick(1)">
				<img src="/static/svg/1.svg" class="pic" alt="" />
				<text class="txt">余额查询</text>
			</view>
			<view class="item" @click="itemClick(2)">
				<img src="/static/svg/2.svg" class="pic" alt="" />
				<text class="txt">修改密码</text>
			</view>
			<view class="item" @click="itemClick(3)">
				<img src="/static/svg/3.svg" class="pic" alt="" />
				<text class="xt">模拟存款</text>
			</view>
			<view class="item" @click="itemClick(4)">
				<img src="/static/svg/4.svg" class="pic" alt="" />
				<text class="txt">模拟取款</text>
			</view>
			<view class="item" @click="itemClick(5)">
				<img src="/static/svg/5.svg" class="pic" alt="" />
				<text class="txt">好友转账</text>
			</view>
			<view class="item" @click="itemClick(6)">
				<img src="/static/svg/6.svg" class="pic" alt="" />
				<text class="txt">交易记录</text>
			</view>
		</view>
		<OpenAccount v-if="showAccount" @close="OpenAccountClose"></OpenAccount>
		<Password v-if="showPassword"></Password>
	</view>
</template>

<script>
	import OpenAccount from '@/components/OpenAccount/index.vue'
	import Password from '@/components/Password/index.vue'
	export default {
		components:{
			OpenAccount,
			Password
		},
		data() {
			return {
				showAccount:false,
				showPassword:false
			}
		},
		onLoad() {

		},
		mounted() {
			
		},
		methods: {
			itemClick(type){
				if(type==1){
					this.showPassword=true
				}else if(type==2){
					
				}else{
					uni.showModal({
						title: '提示',
						content: '',
						placeholderText:'请输入6位交易密码',
						editable:true,
						success: function (res) {
							console.log(res)
							//res:{confirm: true/cancel: true;content: "22222";errMsg: "showModal:ok"}
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			OpenAccountClose() {
				this.showAccount=false
				uni.showToast({
					title: '领取成功',
					icon:'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss">
.content{
	padding: 24rpx;
	.info{
		background-color: white;
		border-radius: 8rpx;
		padding: 36rpx 24rpx;
		box-shadow: 0 0 10rpx rgb(0,0,0,.1);
		margin-bottom: 24rpx;
		.txt{
			padding: 24rpx 0;
			font-size: 32rpx;
			color: #333;
			.fb{
				font-weight: bold;
				color: #666;
			}
		}
	}
	.list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			flex: 0 0 48.5%;
			background-color: white;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
			padding: 48rpx 24rpx;
			text-align: center;
			box-sizing: border-box;
			box-shadow: 0 0 10rpx rgb(0,0,0,.1);
			.pic{
				display: block;
				margin: 0 auto 24rpx;
				width: 100rpx;
				height: 100rpx;
			}
			.txt{
				padding: 12rpx 0;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
}	
</style>
